import { Col, InputNumber, Row, Slider } from "antd";
import React from "react";
import { useRecoilState } from "recoil";
import { pulseTimeState } from "../../store/config";

const SystemConfig: React.FC = () => {
  const [inputValue, setInputValue] = useRecoilState(pulseTimeState);

  const onChange = (newValue: number | null) => {
    setInputValue(newValue as number);
  };
  return (
    <>
      <div>
        <h2>set pulse time</h2>
      </div>
      <Row>
        <Col span={12}>
          <Slider
            min={500}
            max={5000}
            onChange={onChange}
            value={inputValue}
            step={500}
          />
        </Col>
        <Col span={4}>
          <InputNumber
            min={500}
            max={5000}
            style={{ margin: "0 16px" }}
            value={inputValue}
            onChange={onChange}
            step={500}
          />
        </Col>
      </Row>
    </>
  );
};

export default SystemConfig;
